//24h开播主播数(功能5)
//数据格式：[1,2,3,4,5]
<template>
<div>
  <blockquote>数据截止至2021年8月9日</blockquote>
  <div id="totalAnchor" :style="{ width: '1000px', height: '700px' }" />
</div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import stores from "@/store";
import echarts from "echarts";
export default {
  name: "netGame",
  data() {
    return {
      msg: "",
    };
  },
  mounted() {
    this.$axios
      .post(stores.spring_url + "/home/function5", "function5")
      .then((res) => {
        console.log(res);
        this.drawLine(res.data.anchor);
      });
  },
  methods: {
    drawLine(res) {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(
        document.getElementById("totalAnchor")
      );
      const xAxisData = [];
      const yAxisData = [];

      for (let i = 0; i <= 23; i++) {
        xAxisData.push(i + "h");
      }

      for (let i of res) {
        //console.log(i)
        yAxisData.push([i.time, i.count]);
      }

      // 绘制图表
      myChart.setOption({
        color: ['#1976D2'],
        legend: {
          data: ["24h开播主播数"],
        },
        xAxis: {
          type: "category",
          data: xAxisData,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "24h开播主播数",
            data: yAxisData,
            type: "line",
          },
        ],
      });
    },
  },
};
</script>
<style>
blockquote {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 40px;
    font-size: 12px;
    box-sizing: border-box;
    height: 30px;
    line-height: 30px;
    background: #fde2e2;
    border: 1px solid #F56C6C;
    padding-left: 15px;
    color :#F55151;
    margin-left: 0;
    margin-top: 0;
    margin-right: 0;
}
</style>